<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body, html {
            width: 100%;
            height: 100%;

        }

        li {
            list-style: none;
        }

        input {
            border: none;
            outline: none;
            color: white;
        }

        #app {
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-image: url("./img/v2-3ff3d6a85edb2f19d343668d24ed9269_r.jpg");
            background-repeat: no-repeat;
        }

        .title {
            line-height: 100px;
            height: 100px;
            width: 100%;
            text-align: center;
            font-size: 50px;
            font-weight: bold;
            font-family: 华文楷体;
            margin-bottom: 50px;
        }

        .l_Container {
            box-sizing: border-box;
            margin: auto;
            overflow: hidden;
            width: 500px;
            height: 600px;
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            border-radius: 50px;
            padding: 50px 0;
        }

        .l_Title {
            box-sizing: border-box;
            width: 100%;
            height: 10%;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 35px;
            font-family: 华文楷体;
        }

        .inContainer {
            box-sizing: border-box;
            width: 100%;
            height: 90%;
            padding: 125px;

        }

        .input {
            box-sizing: border-box;
            width: 250px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 10px;
            text-align: center;
        }


        .inContainer li:first-child {
            margin-bottom: 50px;
        }

        .btnBox1 {
            padding: 30px 50px;
        }

        .btnBox2 {
            width: 100%;
            height: 40px;
        }

        .btn {
            outline: none;
            cursor: pointer;
            width: 100%;
            height: 40px;
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 5px;
        }

        .btn:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        .btn_Logon {
            float: right;
            width: 50px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--  登录标题  -->
    <div class="title"><span>博客</span></div>
    <!-- 登录框 -->
    <div class="l_Container">
        <div class="l_Title"><span>登录</span></div>
        <ul class="inContainer">
            <li class="inputBox">
                <input type="text" class="input" placeholder="请输入用户名" onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入用户名'">
            </li>
            <li class="inputBox">
                <input type="password" class="input" placeholder="请输入密码" onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入用户名'">
            </li>
            <li class="btnBox1">
                <button class="btn_Login btn" v-on:click="Login">登录</button>
            </li>
            <li class="btnBox2">
                <button class="btn_Logon btn">注册</button>
            </li>
        </ul>
    </div>
</div>
<script src="./../../JS/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            Login: function () {
                alert("登录成功")
            }
        }
    })
</script>
</body>
</html>